<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图示例</title>
    <link rel="stylesheet" href="yaowen.css">
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        .carousel {
            position: relative;
            max-width: 600px;
            margin: auto;
            overflow: hidden;
        }

        .slides2 {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }

        .slide2 {
            min-width: 100%;
            box-sizing: border-box;
        }

        .slide img {
            width: 100%;
            display: block;
        }

        button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 10px;
            cursor: pointer;
        }

        button.prev {
            left: 10px;
        }

        button.next {
            right: 10px;
        }

    </style>
</head>
<body>
    <div class="carousel2">
        <div class="slides2">
           <div class="slide2"><img src="./image/1.png" alt="Image 1"></div>
            <div class="slide2"><img src="./image/2.png" alt="Image 2"></div>
            <div class="slide2"><img src="./image/3.png" alt="Image 3"></div>

        </div>
        <button class="prev">&#10094;</button>
        <button class="next">&#10095;</button>
    </div>
   
</body>

<script>
            let currentIndex = 0;
            const slides = document.querySelectorAll('.slide2');
            const totalSlides = slides.length;
            const intervalTime = 1000; // 设置自动播放的时间间隔，单位为毫秒

            document.querySelector('.prev').addEventListener('click', () => {
                currentIndex = (currentIndex > 0) ? currentIndex - 1 : totalSlides - 1;
                updateCarousel();
            });

            document.querySelector('.next').addEventListener('click', () => {
                currentIndex = (currentIndex < totalSlides - 1) ? currentIndex + 1 : 0;
                updateCarousel();
            });

            function updateCarousel() {
                const slideWidth = slides[0].clientWidth;
                const newTransformValue = -currentIndex * slideWidth;
                document.querySelector('.slides2').style.transform = `translateX(${newTransformValue}px)`;
            }

            // 自动播放功能
            let autoPlay = setInterval(() => {
                currentIndex = (currentIndex < totalSlides - 1) ? currentIndex + 1 : 0;
                updateCarousel();
            }, intervalTime);

            // 鼠标悬停时停止自动播放，移开时继续自动播放
            document.querySelector('.carousel2').addEventListener('mouseover', () => {
                clearInterval(autoPlay);
            });

            document.querySelector('.carousel2').addEventListener('mouseout', () => {
                autoPlay = setInterval(() => {
                    currentIndex = (currentIndex < totalSlides - 1) ? currentIndex + 1 : 0;
                    updateCarousel();
                }, intervalTime);
            });


</script>

</html>
